<template>
  <div class="login">
    <div class="login-wrap">
      <div class="login-header">
        <h2 class="login-brand">企业端管理后台</h2>
      </div>
      <div class="login-body">
        <h3 class="login-title">登录</h3>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
          <el-form-item prop="userName">
            <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        dataForm: {
          userName: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        dataRule: {
          userName: [
            { required: true, message: '帐号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        },
        captchaPath: ''
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/app/user/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('Ent-token', data.token)
                this.$router.replace({ name: 'home' })
              } else {
                this.getCaptcha()
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.login{
  height: 100vh;
  background-color: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  background: #019ec4
}
.login-wrap{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100vh;
  padding: 50px 20px 150px;
  text-align: center;

  .login-header{
    padding: 20px;
    color: #fff;
    .login-brand{
      margin: 0 0 15px;
      font-size: 40px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
  }
}

.login-body{
  padding: 20px 30px;
  background-color: #fff;
  width: 460px;
  .login-title {
    font-size: 18px;
    font-weight: 400;
  }
  .login-captcha{
    height: 40px;
    img{
      width: 100%;
    }
  }
  .login-btn-submit{
    width: 100%;
  }
}
</style>
